import React from 'react';
import { Card, Button, Progress, Tag, Space, message } from 'antd';
import { CheckCircleOutlined, ClockCircleOutlined } from '@ant-design/icons';
import { Task } from '../../types/task';

interface TaskCardProps {
  task: Task;
  onComplete: (taskId: string) => void;
}

const TaskCard: React.FC<TaskCardProps> = ({ task, onComplete }) => {
  const getTaskStatus = () => {
    if (!task.completed) return null;
    
    const now = new Date();
    const completedDate = now;
    
    const weekDiff = Math.floor((now.getTime() - completedDate.getTime()) / (7 * 24 * 60 * 60 * 1000));
    
    if (task.type === 'weekly' && weekDiff < 1) {
      const nextDate = new Date(completedDate);
      nextDate.setDate(nextDate.getDate() + 7);
      return {
        type: 'warning',
        text: `下次可完成时间: ${nextDate.toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit'
        })}`,
        icon: <ClockCircleOutlined />
      };
    }
    
    return {
      type: 'success',
      text: '已完成',
      icon: <CheckCircleOutlined />
    };
  };

  const status = getTaskStatus();

  return (
    <Card
      title={task.title}
      extra={
        <Space>
          {status && (
            <Tag icon={status.icon} color={status.type}>
              {status.text}
            </Tag>
          )}
          <Button
            type="primary"
            onClick={() => onComplete(task.id)}
            disabled={task.completed && status?.type === 'warning'}
          >
            完成任务
          </Button>
        </Space>
      }
    >
      <div>{task.description}</div>
      <div style={{ marginTop: 8 }}>
        <Tag color="blue">绿色能量: +{task.reward.greenEnergy}</Tag>
        <Tag color="green">减碳: -{task.reward.carbonReduction}kg</Tag>
      </div>
    </Card>
  );
};

export default TaskCard; 